//用户状态
{
  let oLogin = document.querySelector('.login1')
  let flag = localStorage.getItem('token')
  let user = localStorage.getItem('user')
  if (flag) {
    oLogin.innerHTML = `<a class="red" href="javascript:;">Hi, ${user}</a><a class="exit" href="javascript:;">&nbsp;&nbsp; [退出]&nbsp;&nbsp;</a><em class="card"></em><a href="./html/shopping.html">购物车</a>&nbsp;<b class='red'></b>`

    let oExit = document.querySelector('.exit')

    oExit.addEventListener('click', function () {
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      location.reload()
    })
    // 购物车数据
    let shopCarCount = document.querySelector('.welcome b')
    // 购物车里面
    if (localStorage.getItem('shopArr') === null) {
      var count = 0
    } else {
      count = JSON.parse(localStorage.getItem('shopArr')).length
    }
    shopCarCount.innerHTML = count
  }
}
//导航二级
{
  let province = document.querySelector('.province')
  let goWhere = document.querySelector('.go-where')
  //初始化
  ajax({
    url: '../../Dangdangshopping/data/province.json',
    success(res) {
      let obj = JSON.parse(res).data
      goWhere.innerHTML = `送至： ${obj[0]}`
      //渲染省份
      obj.forEach(ele => {
        province.innerHTML += `<li><a href="javascript:;">${ele}</a></li>`
      })
      //更换省份
      province.addEventListener('click', e => {
        goWhere.innerHTML = `送至： ${e.target.innerText}`
      })
      goWhere.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      goWhere.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
      province.addEventListener('mouseover', () => {
        province.style.display = 'block'
      })
      province.addEventListener('mouseout', () => {
        province.style.display = 'none'
      })
    },
  })
  //导航栏初始化
  let navRight = document.querySelector('.nav-right')
  ajax({
    url: '../../Dangdangshopping/data/nav.json',
    success(res) {
      let obj = JSON.parse(res).data
      obj.forEach((ele, index) => {
        navRight.innerHTML += `<li>
    <a href="javascript:;" class="${ele.erJi ? 'bg' : ''}"
    data-s=${ele.erJi ? index : null}>
    ${ele.msg}</a>
    <div class="nav-list-right"></div></li>`
      })
      let navErj = navRight.querySelectorAll('.nav-list-right')
      //生成二级
      navRight.addEventListener('mouseover', e => {
        if (e.target.tagName === 'A') {
          if (e.target.dataset.s !== 'null') {
            let erJ = e.target.parentNode.children[1]
            let erJN = obj[e.target.dataset.s].erJi.msg
            erJ.innerHTML = ''
            for (let i = 0; i < erJN.length; i++) {
              erJ.innerHTML += `<p>${erJN[i]}</p>`
            }
            erJ.style.display = 'block'
          }
        }
      })
      navRight.addEventListener('mouseout', e => {
        if (e.target.tagName === 'A') {
          e.target.nextElementSibling.style.display = 'none'
        }
      })
      navErj.forEach(ele => {
        ele.addEventListener('mouseover', e => {
          ele.style.display = 'block'
        })
        ele.addEventListener('mouseout', e => {
          ele.style.display = 'none'
        })
      })
    },
  })
}
//搜索框
{
  let searchSpan = document.querySelector('.search span')
  let selectPop = document.querySelector('.search .select_pop')
  //初始化
  ajax({
    url: '../../Dangdangshopping/data/search.json',
    success(res) {
      let obj = JSON.parse(res).data
      searchSpan.innerHTML = obj[0]
      obj.forEach(ele => {
        selectPop.innerHTML += `<a href="javascript:;">${ele}</a>`
      })
      searchSpan.addEventListener('mouseover', () => {
        selectPop.style.display = 'block'
      })
      searchSpan.addEventListener('mouseout', () => {
        selectPop.style.display = 'none'
      })
      selectPop.addEventListener('mouseover', () => {
        selectPop.style.display = 'block'
      })
      selectPop.addEventListener('click', e => {
        searchSpan.innerHTML = e.target.innerText
      })
      selectPop.addEventListener('mouseout', () => {
        selectPop.style.display = 'none'
      })
    },
  })

  //热搜数据
  let hotSearch = [
    '开口说话绘本',
    '百丽童鞋',
    '三只松鼠',
    '世界喧嚣',
    '透视世界',
    '今日抢购',
  ]
  //初始化
  let hotSech = document.querySelector('.search_bottom')
  hotSech.innerHTML = `<a href="javascript:;">热搜:</a>`
  hotSearch.forEach(ele => {
    hotSech.innerHTML += `<a href="javascript:;">${ele}</a>`
  })
  hotSech.innerHTML += `<a href="javascript:;">高级搜索</a>`
}
//购物车
{
  // 购物车数据
  let shopCarCount = document.querySelector('.char b')
  // 购物车里面
  if (localStorage.getItem('shopArr') === null) {
    var count = 0
  } else {
    count = JSON.parse(localStorage.getItem('shopArr')).length
  }
  shopCarCount.innerHTML = count
}
//渲染页面
{
  let cId = JSON.parse(localStorage.getItem('cId'))
  window.onload = function () {
    let normal = document.querySelector('.normal')
    let mainLeftBottom = document.querySelector('.main_left_bottom')
    let bigPic = document.querySelector('.big_pic')
    let cc = document.querySelector('.cc')
    let jPrice = document.querySelector('.j_price')
    normal.innerHTML = `<img class="ddd" src="${cId.list_big_pic}" alt="" />
            <div class="mask"></div>`
    mainLeftBottom.innerHTML = `
    <img src="${cId.list_small_pic}" data-s="1" alt="" />
    <img src="${
      cId.list_small_pic2 ? cId.list_small_pic2 : 'dell'
    }" data-s="2" alt="" />
    <img src="${
      cId.list_small_pic3 ? cId.list_small_pic3 : 'dell'
    }" data-s="3" alt="" />`
    bigPic.innerHTML = `<img class="bigImg" src="${cId.list_big_pic}" alt="" />`
    cc.innerHTML = `<h1>${cId.list_name}</h1>
              <p>${cId.list_introduce}</p>`
    jPrice.innerHTML = `<b>¥</b>${cId.list_price}`
    let dell = document.querySelectorAll('.main_left_bottom img')
    dell.forEach(ele => {
      ele.src === 'http://localhost/Dangdangshopping/html/dell'
        ? ele.remove()
        : ''
    })
  }
  //加入购物车
  let btn = document.querySelector('.btn')
  btn.onclick = () => {
    let shopArr = JSON.parse(localStorage.getItem('shopArr'))
    let s = true
    for (let i = 0; i < shopArr.length; i++) {
      // 新数组里面肯定有
      if (cId.list_id === shopArr[i].list_id) {
        s = false
        shopArr[i].count++
        // 存到本地
        localStorage.setItem('shopArr', JSON.stringify(shopArr))
        alert('添加成功')
        location.href = '../html/shopping.html'
      }
    }
    if (s) {
      cId.count = 1
      shopArr.push(cId)
      localStorage.setItem('shopArr', JSON.stringify(shopArr))
      alert('添加成功')
      location.href = '../html/shopping.html'
    }
  }

  //放大镜
  {
    let cId = JSON.parse(localStorage.getItem('cId'))
    let smallImg = document.querySelector('.main_left_bottom')
    let normalImg = document.querySelector('.normal')
    let big = document.querySelector('.big_pic')
    let smallPic = ''
    smallImg.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        if (e.target.dataset.s === '1') {
          smallPic = cId.list_small_pic
        } else if (e.target.dataset.s === '2') {
          smallPic = cId.list_small_pic2
        } else if (e.target.dataset.s === '3') {
          smallPic = cId.list_small_pic3
        }
        normalImg.innerHTML = `
      <img class="ddd" src="${smallPic}" alt="" />
      <div class="mask"></div>`
        big.innerHTML = `<img class="bigImg" src="${smallPic}" alt="" />`
      }
    })
    // 鼠标经过显示隐藏放大镜
    normalImg.addEventListener('mouseover', function () {
      let mask = document.querySelector('.mask')
      mask.style.display = 'block'
      big.style.display = 'block'
    })
    normalImg.addEventListener('mouseout', function () {
      let mask = document.querySelector('.mask')
      mask.style.display = 'none'
      big.style.display = 'none'
    })
    // 鼠标移动的时候，让放大镜跟着鼠标来走
    normalImg.addEventListener('mousemove', function (e) {
      let mask = document.querySelector('.mask')
      let x = e.clientX - this.getBoundingClientRect().left
      let y = e.clientY - this.getBoundingClientRect().top
      let maskX = x - mask.offsetWidth / 2
      let maskY = y - mask.offsetHeight / 2
      // 遮挡层的最大移动距离
      let maskMax = normalImg.offsetWidth - mask.offsetWidth
      if (maskX <= 0) {
        maskX = 0
      } else if (maskX >= maskMax) {
        maskX = maskMax
      }
      if (maskY <= 0) {
        maskY = 0
      } else if (maskY >= maskMax) {
        maskY = maskMax
      }
      mask.style.left = maskX + 'px'
      mask.style.top = maskY + 'px'
      //大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
      // 大图
      let bigIMg = document.querySelector('.bigImg')
      // 大图片最大移动距离
      let bigMax = bigIMg.offsetWidth - big.offsetWidth
      // 大图片的移动距离 X Y
      let bigX = (maskX * bigMax) / maskMax
      let bigY = (maskY * bigMax) / maskMax
      bigIMg.style.left = -bigX + 'px'
      bigIMg.style.top = -bigY + 'px'
    })
  }
}
